<template>
	<!-- 产品对比 -->
	<view class="bg-white table_warp">
		<scroll-view scroll-x="true" scroll-y="true" class="scroll">
			<!-- <view> -->
			<t-table border="1" border-color="#DCDCDC" class="table_box">
				<t-tr font-size="14" color="#333333" class="bg-white sticky_top bg-white">
					<t-th class="td_box bg_main cont_label">
						<view class="text-white flex flex-column">
							<text class="font_24_2 font-weight-bolder scale">当前{{ names.length }}款产品</text>
							<text class="font-small scale my font-weight-light">最多添加10款产品</text>
							<button class="clear_btn font-small text-white scale mt-1 font-weight-light" @click="clearAll">清空</button>
						</view>
					</t-th>
					<t-th class="head td_cont" v-for="(nameItem, nameIdx) of names" :key="nameIdx">
						<view class="flex flex-column">
							<text class="font-small c_6 scale pt-1">{{ nameItem.title }}</text>
						</view>
						<view class="close" @click="delcol(nameIdx)"><u-icon name="close-circle" color="#666666" size="15"></u-icon></view>
					</t-th>
					<t-th class="td_cont" v-if="names.length < 10">
						<view class="font-small c_6 scale flex" @click="getMid">
							<text class="mr-1">添加产品</text>
							<u-icon name="plus-circle" color="#666666" size="15"></u-icon>
						</view>
					</t-th>
				</t-tr>
				<view v-for="(item, item_index) of list" :key="item_index">
					<t-tr color="#333333" style="background-color: #f2f2f2;">
						<t-td align="center" class="cont_label big_label">
							<view class="label_text cont_label font-weight-bolder">{{ item.title }}</view>
						</t-td>
					</t-tr>
					<t-tr class="tr_box" v-for="(child, index) of item.list" :key="index">
						<t-td align="center" class="td_box cont_label font-small">{{ child.name }}</t-td>
						<t-td align="center" class="td_cont bg-white text-center" v-for="(child_item, childIdx) of child.val" :key="childIdx">
							<u-read-more ref="uReadMore" :showHeight="140 + 'rpx'" textIndent="0" :shadowStyle="shadowStyle" :toggle="true" color="#999" fontSize="23rpx">
								<rich-text class="td_cont_item font-small text-center" :nodes="child_item | formatRichText" selectable></rich-text>
							</u-read-more>
						</t-td>
					</t-tr>
				</view>
			</t-table>
			<!-- </view> -->
		</scroll-view>
		<!-- 添加产品---弹出层 -->
		<view class="add_popup">
			<u-popup :show="addShow" mode="center" :round="10" :overlay="false" bgColor="rgba(0, 0, 0,0.5)" closeOnClickOverlay @close="close">
				<view class="p-2 popup_warp" style="margin: auto;">
					<view class="text bg-white flex justify-center" v-for="(item, index) of selectList" :key="index" @click="selectChange(item, index)">
						<text class="text_hidden1">{{ item }}</text>
						<view class="bottom_icon"><u-icon name="arrow-down-fill" color="#999999" size="15"></u-icon></view>
					</view>
					<button class="bg_main text-white text" @click="addProduct">确认添加</button>
				</view>
			</u-popup>
		</view>
		<u-picker :show="pikerShow" :columns="columns" :keyName="keyName" @cancel="cancel" @confirm="confirm"></u-picker>
	</view>
</template>

<script>
import util from '@/common/js/util.js';
import tTable from './component/t-table/t-table.vue';
import tTh from './component/t-table/t-th.vue';
import tTr from './component/t-table/t-tr.vue';
import tTd from './component/t-table/t-td.vue';
import { getProductCompared, productCategory, getProductBrands, getProductSeries, getProductProducts } from '@/api/home/nav/product_data.js';
export default {
	components: { tTable, tTh, tTr, tTd },
	data() {
		return {
			addShow: false, //添加产品弹窗
			selectList: ['选择分类', '选择品牌', '选择系列', '选择产品'],
			pikerShow: false, //选择器
			columns: [],
			ids: '', //产品id
			names: [], //产品名
			list: [], //产品规格
			keyName: '',
			selectIdx: 0, //弹框中点击的第几个按钮
			classifyId: '', //分类id
			brandName: '', //品牌名称
			seriesName: '', //系列名称
			productId: '', //产品id
			midType: '', //分类id
			shadowStyle: {
				// #ifndef APP-NVUE
				backgroundImage: 'linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, #fff 90%)',
				// #endif
				// #ifdef APP-NVUE
				// nvue上不支持设置复杂的backgroundImage属性
				backgroundImage: 'linear-gradient(to top, #fff, rgba(255, 255, 255, 0.5))',
				// #endif
				paddingTop: '50px',
				marginTop: '-50px'
			}
		};
	},
	filters: {
		formatRichText(html) {
			return util.formatRichText(html);
		}
	},
	onLoad(options) {
		this.ids = options.ids;
		this.midType = options.mid;
		this.getInfo();
		// 分享
		wx.showShareMenu({
			withShareTicket: true,
			menus: ['shareAppMessage', 'shareTimeline']
		});
	},
	methods: {
		getInfo() {
			let that = this;
			getProductCompared(that.ids)
				.then(res => {
					// console.log(res);
					if (res.code == 0) {
						that.names = res.data.product;
						that.list = res.data.parameterData;
						setTimeout(() => {
							that.$nextTick(() => {
								that.$refs.uReadMore.forEach(item => item.init());
							});
						}, 1000);
					} else {
						uni.$u.toast(res.msg);
					}
				})
				.catch(err => {
					console.log('获取产品pk内容失败', err);
				});
		},
		// 默认分类
		getMid() {
			// 根据列表选择的产品的分类，来默认展示添加弹框里的分类
			// console.log('ids', this.ids);
			if (this.ids) {
				// console.log('this.midType', this.midType);
				if (this.midType) {
					productCategory()
						.then(res => {
							if (res.code == 0) {
								this.classifyId = this.midType;
								this.selectList[0] = res.data.filter(item => this.midType == item.id)[0].title;
							} else {
								uni.$u.toast(res.msg);
							}
						})
						.catch(err => {
							console.log('获取产品分类失败', err);
						});
				}
			} else {
				// 如果产品被清空或被全部删除，弹框里的选择分类恢复正常
				this.classifyId = '';
				this.selectList[0] = '选择分类';
			}
			this.addShow = true;
		},
		// 清空
		clearAll() {
			this.names = [];
			this.list = [];
			this.midType = '';
			// this.list.forEach(item => {
			// 	item.val = [];
			// });
			this.ids = '';
		},
		// 单列删除
		delcol(idx) {
			uni.showLoading({
				title: '正在删除...'
			});
			this.names.splice(idx, 1);
			this.list.forEach(item => {
				this.$nextTick(() => {
					item.list.forEach(child => {
						child.val.splice(idx, 1);
						// console.log(child.val);
						uni.hideLoading();
					});
				});
			});

			let idsArr = JSON.parse(JSON.stringify(this.ids)).split(',');
			idsArr.splice(idx, 1);
			this.ids = idsArr.join(',');
		},
		// 添加产品-关闭
		close() {
			this.addShow = false;
			// 清空所有后，重新添加的产品时第一个产品选择的分类将固定，后续添加的产品只能是此分类下的产品
			this.selectList = [this.selectList[0], '选择品牌', '选择系列', '选择产品'];
			// this.classifyId = '';
			this.brandName = '';
			this.seriesName = '';
			this.productId = '';
		},
		// 添加产品-选择产品类型
		selectChange(val, idx) {
			this.selectIdx = idx;
			if (idx == 0) {
				if (this.ids && this.classifyId) return;
				// 获取产品分类
				this.pikerShow = true;
				productCategory()
					.then(res => {
						if (res.code == 0) {
							this.keyName = 'title';
							this.columns = [res.data];
						} else {
							uni.$u.toast(res.msg);
						}
					})
					.catch(err => {
						console.log('获取产品分类失败', err);
					});
			} else if (idx == 1) {
				// console.log('选择品牌', this.classifyId);
				// 获取品牌
				if (!this.classifyId) {
					uni.$u.toast('请选择分类');
				} else {
					this.pikerShow = true;
					getProductBrands({ mid: this.classifyId })
						.then(res => {
							if (res.code == 0) {
								this.columns = [res.data];
							} else {
								uni.$u.toast(res.msg);
							}
						})
						.catch(err => {
							console.log('获取品牌失败', err);
						});
				}
			} else if (idx == 2) {
				// 获取系列
				if (!this.brandName) {
					uni.$u.toast('请选择品牌');
				} else {
					this.pikerShow = true;
					let msg = {
						mid: this.classifyId,
						product_brand: this.brandName
					};
					getProductSeries(msg)
						.then(res => {
							// console.log(res);
							if (res.code == 0) {
								this.keyName = 'product_series';
								this.columns = [res.data];
							} else {
								uni.$u.toast(res.msg);
							}
						})
						.catch(err => {
							console.log('获取系列失败', err);
						});
				}
			} else {
				// 获取产品
				if (!this.seriesName) {
					uni.$u.toast('请选择系列');
				} else {
					this.pikerShow = true;
					let msg = {
						mid: this.classifyId,
						product_brand: this.brandName,
						product_series: this.seriesName
					};
					getProductProducts(msg)
						.then(res => {
							// console.log(res);
							if (res.code == 0) {
								this.keyName = 'product_name';
								this.columns = [res.data];
							} else {
								uni.$u.toast(res.msg);
							}
						})
						.catch(err => {
							console.log('获取产品失败', err);
						});
				}
			}
		},
		// 选择器
		cancel() {
			this.pikerShow = false;
		},
		confirm(e) {
			// console.log(e);
			if (this.selectIdx == 0) {
				this.selectList = [e.value[0].title, '选择品牌', '选择系列', '选择产品'];
				// this.selectList[0] = e.value[0].title;
				this.classifyId = e.value[0].id;
				this.brandName = '';
				this.seriesName = '';
				this.productId = '';
			} else if (this.selectIdx == 1) {
				this.selectList = [this.selectList[0], e.value[0], '选择系列', '选择产品'];
				// this.selectList[1] = e.value[0];
				this.brandName = e.value[0];
				this.seriesName = '';
				this.productId = '';
			} else if (this.selectIdx == 2) {
				this.selectList = [this.selectList[0], this.selectList[1], e.value[0].product_series, '选择产品'];
				// this.selectList[2] = e.value[0].product_series;
				this.seriesName = e.value[0].product_series;
				this.productId = '';
			} else {
				this.selectList = [this.selectList[0], this.selectList[1], this.selectList[2], e.value[0].product_name];
				// this.selectList[3] = e.value[0].product_name;
				this.productId = e.value[0].id;
			}
			this.pikerShow = false;
		},
		// 确认添加
		addProduct() {
			// console.log('===', this.productId);
			if (!this.productId) {
				uni.$u.toast('请选择产品');
			} else {
				let idsArr = this.ids.length >= 1 ? JSON.parse(JSON.stringify(this.ids)).split(',') : [];
				idsArr.push(this.productId.toString());
				this.ids = idsArr.join(',');
				this.getInfo();
				this.close();
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.table_warp {
	padding: 20rpx 0 20rpx 20rpx;
	// min-height: 100vh;
	// height: 100%;
	.scroll {
		white-space: nowrap;
		// height: 300rpx;
		min-height: 90vh;
		height: 100%;
		// width: 100%;
	}
}
.table_box {
	display: inline-block;
}
.th_label {
	font-size: 28rpx;
	border-right: 0;
	// padding-left: 20rpx;
}
.tr_box {
	background-color: $color2;
}
.cont_label {
	background-color: #f2f2f2;
	position: sticky;
	left: 0;
	z-index: 1;
}
.td_box {
	max-width: 206rpx;
	min-width: 206rpx;
	white-space: normal;
	// font-weight: 400;
}
.td_cont {
	min-width: 240rpx;
	max-width: 240rpx;
	white-space: normal;
	word-break: break-all;
}
.td_cont_item {
	min-width: 220rpx;
	max-width: 220rpx;
	// background-color: #ffffff;
	white-space: normal;
	word-break: break-all;
	// text-align: center;
}
.sticky_top {
	position: sticky;
	top: 0;
	z-index: 5;
}
.clear_btn {
	width: 116rpx;
	height: 36rpx;
	background: linear-gradient(0deg, #d73342, #e5525f);
	box-shadow: 0px 0px 3rpx 1rpx #ffffff;
	border-radius: 10rpx;
	line-height: 36rpx;
}
.scale {
	transform: scale(0.9);
}
.head {
	position: relative;
	.close {
		position: absolute;
		top: 7rpx;
		right: 7rpx;
	}
}
.popup_warp {
	margin: auto;
	text-align: center;
	width: 600rpx;
	.text {
		font-size: 24rpx;
		font-weight: 800;
		width: 423rpx;
		height: 66rpx;
		border-radius: 10rpx;
		line-height: 66rpx;
		margin: 20rpx auto;
		position: relative;
	}
	.bottom_icon {
		position: absolute;
		right: 18rpx;
		top: 20rpx;
	}
}
.big_label {
	max-width: 206rpx;
	min-width: 206rpx;
	padding-left: 0rpx;
	border-right: 0;
	.label_text {
		// padding-left: 30rpx;
		font-size: 28rpx;
	}
}
::v-deep .u-safe-bottom {
	padding: 0;
}
::v-deep .big_label .t-td {
	border-right: 0;
}
::v-deep .add_popup .u-popup__content {
	background: rgba(0, 0, 0, 0.5) !important;
}
</style>
